import React ,{Component}from 'react';
import 'antd/dist/antd.css';
import store from '../Store/saga'
import {getInitData,changeInputValue,delecteItem,addItem} from '../Store/actionCreators';
import NewTodoListUi from './newTodoListUi'
class NewTodoList extends Component{
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handerChange = this.handerChange.bind(this);
        this.getChangeStore = this.getChangeStore.bind(this);
        this.handerLitem = this.handerLitem.bind(this);
        this.delecteItem = this.delecteItem.bind(this);
        store.subscribe(this.getChangeStore)
    }
    componentDidMount(){
        // const action =  getInitData();
        // store.dispatch(action)
    }
    render(){
        return(
            <NewTodoListUi 
            handerChange={this.handerChange}
            inputValue={this.state.inputValue}
            list={this.state.list}
            getChangeStore={this.getChangeStore}
            handerLitem={this.handerLitem}
            delecteItem={this.delecteItem}
            />
        )
    }
    handerChange(e){
        const action = changeInputValue(e.target.value);
        store.dispatch(action);
    }
    getChangeStore(){
        this.setState(store.getState())
    }
    delecteItem(index){
        const action=delecteItem(index)
        store.dispatch(action)
    }
    handerLitem(){
        const action = addItem();
        store.dispatch(action)
    }
}
export default NewTodoList;